import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Popconfirm, Divider, Button, Input, Modal, Space, Tag, Drawer } from 'antd';
import { PlusOutlined, SyncOutlined } from '@ant-design/icons';
import { Link, connect } from 'umi';
import moment from 'moment';
import ContentEdit from './contentEdit';
import Categories from './categories';

const { Search } = Input;
class ViewContent extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      dataSource: [],
      visible: false,
      selectedRowKeys: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      payload: {},
    };
  }
  componentDidMount() {
    this.fetchDatas();
  }
  fetchDatas = () => {
    this.setState({ loading: true });
    const { pageIndex, pageSize, payload } = this.state;
    this.props
      .dispatch({
        type: 'Article/getListsAsync',
        payload: {
          SkipCount: (pageIndex - 1) * pageSize,
          MaxResultCount: pageSize,
          ...payload,
        },
      })
      .then(() => {
        var resp = this.props.Article.response;
        console.log(resp);

        if (resp) {
          var dataSource = resp.result;
          this.setState({ loading: false, dataSource, totalCount: resp.result?.totalCount });
        }
      });
  };
  handleDelete = (id: number) => {
    this.props.dispatch({
      type: 'Abp/delete',
      payload: { id },
      control: 'Article',
    });
  };
  handleEdit = (record: any) => {
    this.props.dispatch({
      type: 'Article/setCurrent',
      payload: record,
    });
    this.switchModal(true);
  };
  handleAdd = () => {
    this.props.dispatch({
      type: 'Article/setCurrent',
      payload: {},
    });
    this.switchModal(true);
  };
  onSelectChange = (selectedRowKeys: any) => {
    this.setState({ selectedRowKeys });
  };
  onSearch = (value: any) => {
    var payload = this.state.payload;
    payload.keywords = value;
    console.log(payload);
    this.setState({ payload }, () => {
      this.fetchDatas();
    });
  };
  switchModal = (visible: boolean) => {
    this.setState({ visible });
  };
  render() {
    const { loading, dataSource, selectedRowKeys, totalCount, pageSize } = this.state;
    const columns: any = [
      {
        title: '序号',
        key: 'index',
        width: 60,
        render: (_: any, __: any, i: any) => {
          return i + 1;
        },
      },
      {
        title: '标题',
        dataIndex: 'title',
        width: 240,
      },
      {
        title: '标签',
        dataIndex: 'tags',
        width: 180,
        render: (text: string) => <Tag color="lime">{text}</Tag>,
      },
      {
        title: '类别',
        dataIndex: 'categoryName',
        width: 180,
        render: (text: string) => <Tag color="magenta">{text}</Tag>,
      },
      {
        title: '发布时间',
        width: 200,
        dataIndex: 'creationTime',
        render: (text: string) => <span>{moment(text).format('YYYY-MM-DD HH:MM:SS')}</span>,
      },
      {
        title: '操作',
        render: (record: any) =>
          dataSource.length >= 1 ? (
            <span>
              <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                <a>删除</a>
              </Popconfirm>
              <Divider type="vertical" />
              <Link to={'./contEdit?id=' + record.id}>编辑</Link>
              {/* <a onClick={() => this.handleEdit(record)}>编辑</a> */}
            </span>
          ) : null,
      },
    ];
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <PageHeaderWrapper title={false}>
        <Card>
          <Space>
            <Button
              type="primary"
              onClick={this.fetchDatas}
              loading={loading}
              icon={<SyncOutlined />}
            >
              刷新
            </Button>
            <Button type="dashed" onClick={this.handleAdd} icon={<PlusOutlined />}>
              快速添加
            </Button>
            <Button type="dashed" onClick={() => this.setState({ visible2: true })}>
              添加分类
            </Button>
            <Link to="./contEdit">
              <Button type="primary" icon={<PlusOutlined />}>
                新增
              </Button>
            </Link>
            <Search
              placeholder="输入关键词搜索"
              allowClear
              onSearch={(value) => this.onSearch(value)}
            />
            <span>{hasSelected ? `选择了 ${selectedRowKeys.length} 项` : ''}</span>
          </Space>
        </Card>
        <Table
          rowKey="id"
          loading={loading}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={dataSource}
          pagination={{
            onChange: (page) => {
              this.setState({ pageIndex: page }, () => {
                this.fetchDatas();
              });
            },
            pageSize,
            total: totalCount,
          }}
        />
        <Drawer
          width={600}
          placement="left"
          closable={false}
          onClose={() => this.setState({ visible2: false })}
          visible={this.state.visible2}
          destroyOnClose={true}
        >
          <Categories layout="article" />
        </Drawer>
        <Modal
          title={<b>快速添加</b>}
          visible={this.state.visible}
          onOk={() => this.switchModal(false)}
          onCancel={() => this.switchModal(false)}
          footer={null}
          destroyOnClose={true}
        >
          <ContentEdit
            switchModal={(para: any) => this.switchModal(para)}
            fetchDatas={() => this.fetchDatas()}
          />
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default connect(({ Abp, Article }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
  Article,
}))(ViewContent);
